<script lang="ts" setup>
import { ref, defineAsyncComponent } from 'vue';
const barHeader = defineAsyncComponent(() => import('@/components/CommentBarSup/BarHeader.vue'));
const barBody = defineAsyncComponent(() => import('@/components/CommentBarSup/BarBody.vue'));
const barFooter = defineAsyncComponent(() => import('@/components/CommentBarSup/BarFooter.vue'));
const Editor = defineAsyncComponent(() => import('@/components/Editor.vue'));
const supCommentBox = defineAsyncComponent(() => import('@/components/SupCommentBox.vue'))
const props = defineProps<{
	idx: number,
	prime: boolean,
}>();
const ed = ref();
const sup = ref();
const handleEnter = () => {
	ed.value.editing = true;
}
const handleExit = () => {
	ed.value.editing = false;
}
const handleCheck = () => {
	sup.value.dialogBoxVisible = true;
}
</script>

<template>
	<div class="comment-bar" :class="{ 'non-prime': !prime }">
		<bar-header :idx="idx"></bar-header>
		<bar-body :idx="idx"></bar-body>
		<bar-footer @checkSupBox="handleCheck" @enterEditing="handleEnter" @exitEditing="handleExit" :prime="prime"
			:idx="idx"></bar-footer>
		<sup-comment-box ref="sup"></sup-comment-box>
		<editor ref="ed">
		</editor>
	</div>
</template>

<style lang="scss" scoped>
@import "@/assets/scss";

.comment-bar {
	width: $minWid;
	margin: 15px auto;
	padding: 15px 20px;
	background-color: #fff;
}

.non-prime {
	width: 526px !important;
	background-color: #f6f6f6 !important;
}
</style>
